<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input class="inp" type="" value="text" placeholder="45465">
    <button class="but1">按钮</button><br>
    <input class="check" type="checkbox">
    <button class="but2" disabled>全选</button>
</body>
<script>
    const inp = document.querySelector('.inp');
    //一.获取值 value 
    // placeholder可以默认设置框的内容
    // console.log(inp.value);
    //二.修改表单类型type
    //可用于隐藏文本信息
    //用一个开关来控制类型的变化
    const button = document.querySelector('.but1');
    console.log(button);
    let pan = true;
    button.addEventListener('click', function () {
        if (pan === true) {
            inp.type = 'password';
            pan = false;
        } else {
            inp.type = 'text'
            pan = true;
        }
    })
    //三.全选按钮 check
    //1.获取复选框checkbox
    //2.获取全选按钮
    const cbox = document.querySelector('[type="checkbox"]');
    console.log(cbox);
    const but2 = document.querySelector('.but2');
    console.log(but2);
    let check = true;
    but2.addEventListener('click', function () {
        if (check === true) {
            cbox.checked = true;
            check = false;
        } else {
            cbox.checked = false;
            check = true;
        }
    })
    //四.disabled 控制按钮的使用
    //使用情景 短信验证
    //语法 可直接行内 disabled， disabled = true/false
    // 取值范围 true / false
</script>

</html>